<template>
  <!-- 在线预约-->
  <div class="bookOnline">
    <el-row class="bookOnline" style="margin-top: 20px;">
        <el-col :span="4" :offset="1" style='height: 400px;'>
          <el-menu
            :router='isrouter'
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b" style="height: 300px;font-weight: bolder;border-radius: 20px;padding:20px;">
            <el-menu-item index="/about">
              <i class="el-icon-document"></i>
              <span slot="title">公司简介</span>
            </el-menu-item>
            <el-menu-item index="/culture">
              <i class="el-icon-star-on"></i>
              <span slot="title">企业文化</span>
            </el-menu-item>
            <el-menu-item index="/connect">
              <i class="el-icon-location-outline"></i>
              <span slot="title">联系我们</span>
            </el-menu-item>
          </el-menu>
        </el-col>

      <el-col :span="18" :offset="1">
        <!--面包屑导航-->
        <el-row>
          <el-col>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>在线预约</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>

        <!--具体内容-->
        <el-row style="margin-top: 50px;">
          <el-col :span="8" :offset="10">
            <h1>在线预约</h1>
          </el-col>
        </el-row>

        <el-row style="margin-top:20px;">
          <el-col :span="18" :offset="3">
            <el-card class="box-card">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                  <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="标题">
                  <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                  <el-input v-model="ruleForm.content"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="margin-left: 40%;" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>

      </el-col>

    </el-row>
  </div>
</template>

<script>
  import request from '@/api/request';
  export default {
    name: "bookOnline",

    data() {
      return {
        msg: "Welcome to Your Vue.js App",
        isrouter:true,
        ruleForm: {
          name: '',
          email: '',
          phone: '',
          title: '',
          content: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ], email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' }
          ], phone: [
            { required: true, message: '请输入电话号码', trigger: 'blur' }
          ],
        }
      };
    },

    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
      ,submitForm(ruform){
        let _this=this;
        console.log(_this.ruleForm);
        this.$refs[ruform].validate((valid) => {
          if (valid) {
            request.submitBookInfo(_this.ruleForm).then((data) => {
              this.$notify.success({
                title: 'Info',
                message: '恭喜你,预约成功!',
                showClose: true
              });
            }).catch((exp)=>{
              this.$notify.success({
                title: 'Info',
                message: '预约失败,请稍后再试!',
                showClose: true
              });
            });
          }
        });
      },resetForm(ruform){
        this.$refs[ruform].resetFields();
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tagStyle{
    font-size: 34px;
    font-weight: bold;
  }
</style>
